const vs = `
attribute vec4 a_Position;
attribute vec4 a_Color;
uniform mat4 u_MvpMatrix;
varying vec4 v_Color;

void main(){
    gl_Position = u_MvpMatrix * a_Position;
    v_Color = a_Color;
}`;
const fs = `
#ifdef GL_ES
precision mediump float;
#endif 

varying vec4 v_Color;

void main(){
    gl_FragColor = v_Color;
}`;

function main() {
    
    let canvas = document.getElementById('glCanvas');
    let gl = getWebGLContext(canvas);
    if(!gl){
        console.error("Failed get gl");
        return;
    }
    gl.viewport(0, 0, canvas.width, canvas.height)
    if(!initShaders(gl,vs,fs)){
        console.error("Failed init shaders");
        return;
    }

    let vertexCount = initVertexBuffers(gl);
    if(vertexCount < 0){
        console.error("Failed initVertexBuffers");
        return;
    }
    gl.clearColor(0.0,0.0,0.0,1.0);
    gl.enable(gl.DEPTH_TEST);

    let u_MvpMatrix = gl.getUniformLocation(gl.program,'u_MvpMatrix');
    if(!u_MvpMatrix){
        console.error("Failed to get location of u_ViewMatrix");
        return;
    }

    let mvpMatrix = new Matrix4()
    mvpMatrix.setPerspective(30,1,1,100);
    mvpMatrix.lookAt(3,3,7,0,0,0,0,1,0);
    // mvpMatrix.rotate()
    // gl.uniformMatrix4fv(u_MvpMatrix,false,mvpMatrix.elements);
    // gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);
    // gl.drawElements(gl.TRIANGLES,vertexCount,gl.UNSIGNED_BYTE,0);

    var tick = function () {
        draw(gl,vertexCount,u_MvpMatrix,mvpMatrix);
        requestAnimationFrame(tick);
    }
    tick();
}

let g_angle = 1;
function draw(gl,vertexCount,u_MvpMatrix,mvpMatrix){

    mvpMatrix.rotate(g_angle,0,1,0);
    console.log("draw -> ",vertexCount);
    gl.uniformMatrix4fv(u_MvpMatrix,false,mvpMatrix.elements);
    gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);
    gl.drawElements(gl.TRIANGLES,vertexCount,gl.UNSIGNED_BYTE,0);
}


function initVertexBuffers(gl){

    let vertices = new Float32Array([
         1.0, 1.0, 1.0,   1.0,1.0,1.0,
        -1.0, 1.0, 1.0,   1.0,0.0,1.0,
        -1.0,-1.0, 1.0,   1.0,0.0,0.0,
         1.0,-1.0, 1.0,   1.0,1.0,0.0,
         1.0,-1.0,-1.0,   0.0,1.0,0.0,
         1.0, 1.0,-1.0,   0.0,1.0,1.0,
        -1.0, 1.0,-1.0,   0.0,0.0,1.0,
        -1.0,-1.0,-1.0,   0.0,0.0,0.0,
    ]);

    let indices = new Uint8Array([
        0,1,2, 0,2,3,
        0,3,4, 0,4,5,
        0,5,6, 0,6,1,
        1,6,7, 1,7,2,
        7,4,3, 7,3,2,
        4,7,6, 4,6,5,
    ]);
    
    let vertexBuffer = gl.createBuffer();
    let indexBuffer = gl.createBuffer();
    if(!vertexBuffer || !indexBuffer){
        console.error("vertexBuffer");
        return -1;
    }

    gl.bindBuffer(gl.ARRAY_BUFFER,vertexBuffer);
    gl.bufferData(gl.ARRAY_BUFFER,vertices,gl.STATIC_DRAW);

    let FSIZE = vertices.BYTES_PER_ELEMENT;
    console.log("FSIZE -> ",FSIZE);

    let a_Position = gl.getAttribLocation(gl.program,'a_Position');
    if(a_Position < 0){
        return -1;
    }
    gl.vertexAttribPointer(a_Position,3,gl.FLOAT,false,FSIZE * 6,0);
    gl.enableVertexAttribArray(a_Position);

    let a_Color = gl.getAttribLocation(gl.program,'a_Color');
    if(a_Color < 0){
        return -1;
    }
    gl.vertexAttribPointer(a_Color,3,gl.FLOAT,false,FSIZE * 6,FSIZE * 3);
    gl.enableVertexAttribArray(a_Color);
    gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER,indexBuffer);
    gl.bufferData(gl.ELEMENT_ARRAY_BUFFER,indices,gl.STATIC_DRAW);

    return indices.length;

}
